<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>补充奖</title>
		<link rel="stylesheet" type="text/css" href="index.css"/>
		<style>
			#start{
			width:190px;
			position:absolute;
			left:350px;
			border:none;
			margin:20px;
			bottom:80px;
			background:transparent;
		}
		#again{
			width:190px;
			border:none;
			color:#fff;
			margin:20px;
			position:absolute;
			left:60px;
			bottom:80px;
			background:transparent;
		}
		#start img,#again img{
			width:190px;
		}
		</style>
	</head>
	<body>
		<div class="container">
			<img class="background" src="img/supplementarybg.png"/>
			<div class="number">
				<span id="thousand">000</span>
			</div>
			<div class="prize">
				<!--<img src="img/grandprizeOff.png"/>
				<img id=""src="img/firstprizeOff.png"/>
				<img id="normal" src="img/normalprizeOff.png"/>
				<img id="third" src="img/thirdprizeOff.png"/>
				<img id="second" src="img/secondprizeOff.png"/>-->
				<!--<button id="grand" class="past"></button>
				<button id="first" class="past"></button>
				<button id="normal" class="past"></button>
				<button id="third" class="past"></button>
				<button id="second" class="past"></button>
				<button id="add" class="past"></button>-->
			</div>
			<div class="prize-number">
			</div>
			<button id="start">
				<!--<span>开始抽奖</span>-->
			 	<img src="img/greenbutton.png" alt="开始" />
			</button>
			<button id="again">
				<!--<span>重新选择</span>-->
			 	<img src="img/redbutton.png" alt="重新" />
			</button>
		</div>
		
		
		<p><button id="clear">清除缓存</button></p>
		<script src="jquery-1.12.3.js"></script>
		<!--<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>-->
		<script src="commen.js"></script>
		<script>
			$(function(){
				var prize=JSON.parse(localStorage.pond);
				var n=prize.length-1;
				var index,winPrize;
				
				console.log(prize);
				console.log(n);
				$("#again").attr("disabled",true);
				$("#again img").css("cursor","not-allowed");
				$("#start").click(function(){
					$("div.prize-number").html("");
					$(this).attr("disabled",true);
					$("#start img").css("cursor","not-allowed");
					$("#again").attr("disabled",false);
					$("#again img").css("cursor","pointer");
					grand();	

				})
				$("#again").click(function(){
					$(this).attr("disabled",true);
					$("#again img").css("cursor","not-allowed");
					winPrize=JSON.parse(localStorage.winPrize);
					timer2=setInterval(function(){
						console.log(isCon(winPrize,prize[index]))
						if(isCon(winPrize,prize[index]) ==false){
							clearInterval(timer1);
							clearInterval(timer2);
							winPrize.push(prize[index]);
							$(".prize-number").append("<span class='grand'>"+prize[index]+"</span>");
							localStorage.grand="true";
							localStorage.winPrize=JSON.stringify(winPrize);
							$("#start").attr("disabled",false);
							$("#start img").css("cursor","pointer");
						}
					},30)
				})
				function grand(){
					timer1=setInterval(function(){
						index=parseInt(Math.random()*n);
						$("#thousand").text(prize[index]);
					},30)
				}
				function isCon(arr,val){
					for(var i=0; i<arr.length; i++){
						if(arr[i] == val)
						return true;
						}
						return false;
				}
			})
		</script>
	</body>
</html>
